import React from 'react'
import styled from 'styled-components'
import { NavLink } from 'react-router-dom'

import img_wechathover from '../../../assets/image/img_wechathover.png';
import img_twitterhover from '../../../assets/image/img_twitterhover.png';
import img_mailhover from '../../../assets/image/img_mailhover.png';

const Nav: React.FC = () => {
  return (
    <StyledNav>
      <StyledCont>
        <StyledDiv>
          <StyledLink1 exact activeClassName="active" to="/">首頁</StyledLink1>
          <StyledLink1 exact activeClassName="active" to="/bank">銀行</StyledLink1>
          <StyledLink1 exact activeClassName="active" to="/bonds">金庫</StyledLink1>
          <StyledLink1 exact activeClassName="active" to="/boardroom">董事會</StyledLink1>
          <StyledLink href="https://ht.mdex.com/#/swap" target="_blank">交易所</StyledLink>
        </StyledDiv>
        <StyledDiv>
          <StyledSpan>2020 © All rights reserved by ESP</StyledSpan>
        </StyledDiv>
      </StyledCont>

      <StyledCont1>
        <img
          style={{ marginLeft: 0 }}
          src={img_twitterhover}
          alt='wechat'
          width={28}
          height={23}
        />

        <img
        style={{ marginLeft: 30 }}
          src={img_mailhover}
          alt='wechat'
          width={28}
          height={23}
        />

        <img
        style={{ marginLeft: 30 }}
          src={img_wechathover}
          alt='wechat'
          width={28}
          height={23}
        />
      </StyledCont1>
    </StyledNav>
  )
}

const StyledLink1 = styled(NavLink)`
  color: #0A8AFF;
  padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  text-decoration: none;
  &:hover {
    color: ${props => props.theme.color.grey[500]};
  }
`

const StyledNav = styled.nav`
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding: 30px 0;
  margin-top: 100px;
`

const StyledCont= styled.div`
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
@media (max-width: 768px) {
  display: none;
}
`

const StyledDiv= styled.div`
flex: 1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
display: flex;
`

const StyledCont1= styled.div`
flex-direction: row;
justify-content: center;
align-items: center;
display: flex;
@media (max-width: 768px) {
  flex: 1;
  
}
`

const StyledLink = styled.a`
  color: #0A8AFF;
  padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  text-decoration: none;
  &:hover {
    color: ${props => props.theme.color.grey[500]};
  }
`

const StyledSpan = styled.span`
  color: #5A5F69;
  margin-top: 30px;
  padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  text-decoration: none;
  &:hover {
    color: ${props => props.theme.color.grey[500]};
  }
`

export default Nav